const wordCloud = echarts.init(document.getElementById('wordCloud'));





console.log(url);
console.log(beginDate);
console.log(endDate);
$.ajax({
    type: 'post',
    url: url+'/api/data-visualization/analysis/statistic/wordCloud',
    data: {
        beginDate : beginDate,
        endDate: endDate,
        keyword: '',
    },
    success(res) {
        if (res.code == 200) {
            initWordCloud(res.data)
        }
        // <div class="swiper-slide">Slide 1</div>
    },
    error(err) {
        console.log(err);
    }
})
const initWordCloud = wordData => {
    wordCloud.setOption({

        tooltip: {
            show: true,
            borderWidth: 0,
            backgroundColor: 'rgba(0,0,0,0.3)',
            textStyle: {
                color: "#fff",
            },
            formatter: (params) => {
                return `${params.marker} ${params.data.name}: ${params.data.value}`
            }
        },
        series: [{
            type: 'wordCloud',

            // The shape of the "cloud" to draw. Can be any polar equation represented as a
            // callback function, or a keyword present. Available presents are circle (default),
            // cardioid (apple or heart shape curve, the most known polar equation), diamond (
            // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

            shape: 'circle',

            // A silhouette image which the white area will be excluded from drawing texts.
            // The shape option will continue to apply as the shape of the cloud to grow.



            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.

            // left: 'center',
            // top: 'center',
            // width: '70%',
            // height: '80%',
            // right: null,
            // bottom: null,

            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.

            sizeRange: [12, 60],

            // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

            rotationRange: [-90, 90],
            rotationStep: 45,

            // size of the grid in pixels for marking the availability of the canvas
            // the larger the grid size, the bigger the gap between words.

            gridSize: 8,

            // set to true to allow word being draw partly outside of the canvas.
            // Allow word bigger than the size of the canvas to be drawn
            drawOutOfBound: false,

            // If perform layout animation.
            // NOTE disable it will lead to UI blocking when there is lots of words.
            layoutAnimation: true,

            // Global text style
            textStyle: {
                color: "#1effaa",
            },
            // emphasis: {
            //     focus: 'self',

            //     textStyle: {
            //         shadowBlur: 10,
            //         shadowColor: '#333'
            //     }
            // },

            // Data is an array. Each array item must have name and value property.
            data: wordData.map(i => ({
                name: i.x,
                value: i.value
            }))
        }]
    });
}
